<template>
	<div class='users-table table-container'>
		<el-table
			ref="table"
			stripe
			:data="users"
			@sort-change="$emit('sortChange',$event)"
			@filter-change="$emit('filterChange',$event)"
		>
			<el-table-column
				label="用户ID"
				width="110px"
				prop="id"
			/>
			<el-table-column
				label="创建时间"
				width="100px"
				sortable
				column-key="date"
				prop="createdTime"
				align="center"
			/>
			<el-table-column
				label="昵称"
				prop="nickname"
				align="center"
			/>
			<el-table-column
				label="专业"
				prop="major"
				align="center"
			/>
			<el-table-column
				label="签署合同"
				align="center"
				:filters="[{ text: '已签署', value: true }, { text: '未签署', value: false }]"
				:filter-multiple="false"
				filter-placement="bottom-end"
				:filter-method="(value, user) => user.signedContract === value"
				column-key="signedContract"
				prop="signedContract"
			>
				<template slot-scope="scope">
					<i
						v-if="scope.row.signedContract"
						class="success el-icon-success"
					/>
					<i
						v-else
						class="none el-icon-error"
					/>
				</template>
			</el-table-column>
			<el-table-column
				label="虚拟货币"
				align="center"
				sortable
				:sort-orders="['descending','ascending', null]"
				column-key="ahaPoint"
			>
				<template slot-scope="scope">
					<div>{{scope.row.ahaCredit}}Aha币</div>
					<div>{{scope.row.ahaPoint}}Aha点</div>
				</template>
			</el-table-column>
			<el-table-column
				label="操作"
				align="center"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						@click="$pushTo('User', {id: scope.row.id})"
					>
						编辑
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
  props: {
    users: {
      type: Array,
      required: true
    }
  },
  methods: {
    initSort() {
      this.$refs.table.clearSort()
      this.$refs.table.clearFilter()
    }
  }
}
</script>

<style lang='scss' scoped>
.users-table {
  .el-table {
    i {
      font-size: $sLarge;

      &.success {
        color: $green;
      }

      &.none {
        color: $dark3;
      }
    }
  }
}
</style>
